<template>
	<!-- <view> -->
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<c-nav-bar1 title="订单详情"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content">
			<view class="head">
				<text class="status"><text v-if="object.orderType == 3 && object.status == 1"
						style="font-size: 44rpx;">拼团成功</text>{{ FishJialeOcfg[object.status] }}<text
						v-if="object.orderType == 3">（{{ object.teamLeader == 1 ? '我发起的' : '我参与的' }})</text></text>
			</view>
			<view class="djs" v-if="object.status==0&&djsTime">
				<uCountDown text="剩余支付时间：" color="#ffffff" :fontSize="24" @finish="finish" :djsTime="djsTime" />
			</view>
			<view class="head-one" v-if="object.status == '8'">
				建议您更改其他日期或选择包船
			</view>
			<view class="ticketInfo" style="margin-bottom: 20rpx;" v-if="object.status == '2' || object.status == '8'">
				<view class="name">
					还差 <span>{{ object.clusteringGap }}</span> 人成团
				</view>
				<view class="list-image">
					<view class="" v-for="item, index in ptNum" key="index">
						<view class="image">
							<image src="https://i.ringzle.com/file/20240313/ef7e99bda4da476a92f36be34f861db9.png"
								mode="">
							</image>
							<view class="text">
								{{ index == 0 ? '团长' : '队员' }}
							</view>
						</view>
					</view>
					<view>
						<view class="image">
							<image src="https://i.ringzle.com/file/20240313/29823801e7c2470ab370c1cce321a455.png"
								mode="">
							</image>
							<view class="text">
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="ticketInfo">
				<view class="name">
					{{ object.goodsNameAndType }}
				</view>

				<view class="date">
					<text>游玩日期</text>
					<text>{{ object.playDateDeal }}</text>
				</view>
				<view class="number" v-if="object.detailDto">
					<view>游客数量*{{ object.detailDto.length || 2 }}</view>
					<view><text>合计</text><text>￥{{ object.orderRealityPay || 16 }}</text></view>
				</view>
				<u-line></u-line>
				<view class="position">
					<u-icon name="map" size="26rpx"></u-icon>
					<view class="">
						上船码头：{{ object.isFisheringGoodsDTO.boardSite }}
					</view>
				</view>

			</view>


			<view class="voucherCode">
				<view class="title">
					<text>凭证码</text>
					<text class="orange">凭有效身份证件或凭证码直接验证使用</text>
				</view>
				<view class="codeList" v-if="object.status == 1">
					<view class="touristList" v-if="object.detailDto">
						<view :class="['tourist', chooseTouristNum == index ? 'tourist_selected' : '']"
							v-for="item, index in object.detailDto" @click="checkName(index)">
							{{ item.touristName | tuomi(1) }}
						</view>
					</view>
					<view class="listItem" v-if="object.detailDto">
						<view v-for="item, index in object.detailDto" :key="index">
							<!-- <view > -->
							<view v-show="chooseTouristNum == index">
								<view class="top">
									<canvas :canvas-id="'qrcode' + index"
										style=" margin:auto; width:280rpx;height:280rpx;" v-if="!qr_code"></canvas>
									<image style="width: 280rpx;height:280rpx" :src="qr_code" v-else></image>
								</view>
								<view class="listItem-bottom">
									<view class=""
										style="margin: 20rpx auto 0;text-align: center;font-size: 30rpx;font-weight: bold;"
										v-if="object.boatNo">
										航班号： {{ object.boatNo }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 游客信息 -->
			<view class="voucherCode_colse" v-if="object.status == 1 || object.status == 2">
				<view class="codeList" style="padding-bottom: 10rpx;">
					<view class="title_info">
						<text>游客信息</text>
					</view>
					<view class="item" v-for="(item, index) in object.detailDto" :key="index">
						<text>{{ item.touristName | tuomi(1) }}</text>
						<text>{{ item.touristCode | tuomi(3) }}</text>
					</view>
				</view>
			</view>
			<view class="voucherCode_colse">
				<view class="codeList">
					<view class="title_info">
						<text>商户信息</text>
					</view>
					<view class="listItemed">
						<view class="name">
							{{ object.merchantInfoDTO.name }}
						</view>
						<view
							style="display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16rpx;">
							<view class="" style="width: 82%; color: #808080; font-size: 28rpx; font-weight: Regular;">
								{{ object.merchantInfoDTO.areaDetail }}
							</view>
							<view class="" style="width: 18%; display: flex;align-items: center; ">
								<span style="margin: auto;" @click="goLocation()"> <u-icon name="map" color="#D0D0D0"
										size="42"></u-icon></span>
								<span style="margin: auto;"> <u-icon name="phone" color="#D0D0D0" size="50"
										@tap="callPhone(object.merchantInfoDTO.phone)"></u-icon></span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo">
				<view class="tit">订单信息</view>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">订单编号</text>

					<text slot="title" class="val">
						{{ object.orderCode }}
						<text class="copy" @click="copyOrderId()">复制</text>
					</text>

				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">下单时间</text>

					<text slot="title" class="val"> {{ object.orderTime }}</text>
				</u-cell>
				<u-cell :border="false" class='cell' v-if="object.status == 7 || object.status == 3">
					<text slot="icon" class="txt">核销时间</text>
					<text slot="title" class="val"> {{ object.updateDate }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">姓名</text>

					<text slot="title" class="val">{{ object.linkName | tuomi(1) }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">手机号码</text>

					<text slot="title" class="val">{{ object.linkPhoneCopy || '' }}</text>
				</u-cell>
			</view>

		</view>

		<view class="btns" v-if="object.status == 0 || object.status == 1 || object.status == 2">
			<template v-if="object.status == 0">
				<view class="" @click="cancelOrder(object)">
					取消订单
				</view>
				<view class="" @click="toPay(object)"
					style="color:#fff ; border-color: #007A69; background-color: #007A69;">
					立即支付
				</view>
			</template>
			<template v-if="object.status == 1">
				<view class="" @click="toRefund()" v-if="object.orderType == 2"
					style="color:#fff ; border-color: #007A69; background-color: #007A69;">
					退票
				</view>
				<view class="" style="color:#fff ; border-color: #007A69; background-color: #007A69;"
					@click="orderAgain()">
					再次预订
				</view>
			</template>
			<template v-if="object.status == 2">
				<view class="" @click="cancelOrder(object)">
					取消订单
				</view>
				<view>
					<button class="share" open-type="share">邀请好友拼团</button>
				</view>
			</template>

		</view>
		<view class="btns" v-else>
			<view @tap.stop="del(object)" class="btn_blue">删除订单</view>
			<view class="" style="color:#fff ; border-color: #007A69; background-color: #007A69;" @click="orderAgain()">
				再次预订
			</view>
		</view>
		<!-- 支付页面 -->
		<u-popup :show="payShow" @close="payShow = false">
			<view class="details details_pay">
				<view class="title">
					<text>请选择</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="payShow = false"></image>
				</view>
				<view class="wechat_pay">
					<view class="wp_left">
						<image src="@/static/index/steamerTicket/img_pay.jpg" mode=""></image>
						<text>微信支付</text>
					</view>
					<image src="https://i.ringzle.com/file/20240301/4669376abd424e6aaf24bc953a19e43b.png" mode="">
					</image>
				</view>
				<view class="pay_submit" @tap="toPay()">确定</view>
			</view>
		</u-popup>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>

		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title1" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>

	</view>

</template>



<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	var that;
	import UQrcode from '@/uqrcode.js'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				FishJialeOcfg: {
					0: '待支付',
					1: '待使用',
					2: '拼船中',
					3: '已使用',
					4: '退款中',
					5: '已退款',
					6: '已取消',
					7: '已完成',
					8: '拼团失败'
				},
				ptNum: 0,
				h: uni.getWindowInfo().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				id: '',
				object: {},
				phoneShow: false,
				picList: [],
				chooseTouristNum: 0,
				chooseTouristId: '',
				title: '',
				path: '',
				qr_code: '',
				locationObj: {},
				djsTime: 0,
				showdelete: false,
				orderType: null,
				delId: null,
				title1: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
			}
		},
		onLoad(option) {
			that = this;
			wx.hideShareMenu();
			if (option.id) {
				this.id = option.id;
				this.getDetails(this.id);
			}
		},
		onShareAppMessage: function() {
			return {
				title: this.title,
				path: this.path
			}
		},
		filters: {
			tuomi(val, type) {
				return that.$aesTm.tuomin(val, type)
			}
		},
		methods: {
			// 取消
			cancel() {
				this.showdelete = false
			},
			// 删除订单
			del(item) {
				this.showdelete = true
				this.delId = item.id
				// this.$showToast('开发中');

			},

			// 确定删除
			confirmed() {
				let id = this.delId

				this.$api.get('/scenic/api/order/deleteOrder/' + id).then(res => {
					if (res.data.code === 0) {
						this.showdelete = false
						setTimeout(() => {
							uni.redirectTo({
								url: '/pagesMy/order/index?name=渔家乐&type=0&typeIndex=5'
							})
							setTimeout(() => {
								this.$showToast('删除成功');
							}, 1000)
						}, 1000)
					} else {
						this.$showModal(res.data.msg);
						this.showdelete = false
					}
				})

			},



			orderAgain() {
				uni.redirectTo({
					url: '/pagesTrip/fishJiale2/index'
				})
			},
			//绘制二维码
			setCOde(name) {
				for (let i = 0; i < this.object.detailDto.length; i++) {
					this.qrFun(name, this.object.detailDto[i].qrCode, i)
				}
			},
			checkName(index) {
				this.chooseTouristNum = index;
				this.qr_code = '';
				this.qrFun('qrcode', this.object.detailDto[index].qrCode, index)
			},
			copyOrderId() {
				uni.setClipboardData({
					data: this.object.orderCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
			qrFun(name, text, index) {
				let canvasId = name + index;
				UQrcode.make({
					canvasId: canvasId, //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 140,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						this.qr_code = res;
					}
				})
			},
			// 获取orderCode  chuan
			getDetails(id) {
				this.$api.get('/api/fishering/personCenterOrderDetail/' + id).then(res => {
					this.object = res.data.data;
					let diffMS = Date.parse(new Date()) - Date.parse(new Date(this.object.orderTime));
					let gqTime = this.$gqTime;
					if (this.object.orderType == 3) gqTime = 5 * 60 * 1000;
					if (diffMS < gqTime) {
						this.djsTime = gqTime - diffMS - 1000; //提前一秒，便于取消刷新
					}
					this.getLocation()
					this.object.linkPhoneCopy = this.$aesTm.tuomin(this.object.linkPhone, 2);
					this.title = `仅剩${this.object.clusteringGap}人，我拼了${this.object.goodsName}体验`;
					this.path = '/pagesTrip/fishJiale2/goodDetail?id=' + this.object.isFisheringGoodsDTO.id;
					this.ptNum = (this.object.clusteringNum - this.object.clusteringGap) || 0;
					this.ptNum = this.ptNum > 3 ? 4 : this.ptNum;
					if (this.object.status == 1) {
						setTimeout(() => {
							this.setCOde('qrcode');
						}, 1000)
					}

				})
			},
			//申请退款
			toRefund() {
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/applyRefund?id=' + this.object.orderCode

				})
			},
			//取消订单
			cancelOrder(item) {
				let sendData = {
					orderType: this.object.orderType,
					orderCode: this.object.orderCode,
					playTime: this.object.playTime,
					playLength: this.object.playLength,
					playDate: this.object.playDate,
					status: this.object.status,
					merchantId: this.object.merchantId,
					boatNo: item.boatNo
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.$api.post('/scenic/api/order/cancelOrder', sendData).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已取消');
									setTimeout(() => {
										uni.reLaunch({
											url: '/pagesMy/order/index?name=渔家乐&type=0&typeIndex=5'
										})
									}, 1000)
								} else that.$showToast(res.data.msg)
							})
						}
					}
				});
			},
			//去支付
			toPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: item.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$wxPay(res.data).then(result => {
							this.$showToast('支付成功');
							this.getDetails(that.id)
						})
					}
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			copyOrderNo(no) {
				let that = this;
				// #ifdef H5
				this.$copyText(no).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: no,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},
			//导航
			goLocation(option) {
				let mapdata = {
					latitude: parseFloat(this.locationObj.latitude),
					longitude: parseFloat(this.locationObj.longitude),
					name: this.locationObj.areaDetail,
				}
				uni.openLocation(mapdata);
			},
			getLocation() {
				this.$api.get('api/merchant/food/merchant/' + this.object.merchantId)
					.then(res => {
						if (res.data.data) {
							this.locationObj.latitude = res.data.data.latitude;
							this.locationObj.longitude = res.data.data.longitude;
							this.locationObj.areaDetail = res.data.data.areaDetail;
						}
					})
			},
			finish() {
				let sendData = {
					orderType: this.object.orderType,
					orderCode: this.object.orderCode,
					playTime: this.object.playTime,
					playLength: this.object.playLength,
					playDate: this.object.playDate,
					status: this.object.status,
					merchantId: this.object.merchantId,
					boatNo: this.object.boatNo
				}
				let that = this;
				that.$api.post('/scenic/api/order/cancelOrder', sendData).then(res => {
					if (res.data.code === 0) {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/order/index?name=渔家乐&type=0&typeIndex=5'
							})
						}, 1000)
					} else that.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F8FA;

		.content {
			position: relative;
			z-index: 3;
			padding-bottom: 160rpx;
		}
	}

	.bg {
		// height: 100%;
		// position: fixed;

		// z-index: 1;
		// width: 100%;
		// background-image: linear-gradient(to bottom, #0EBFFE 0%, #01D1EA 20%, #F5F8FA 50%);
		height: 700rpx;
		position: fixed;
		// top: 44px;
		z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 16rpx;
		width: calc(100% - 48rpx);
		margin: 0 auto 23rpx;



		.cell {
			display: flex;
			justify-content: space-between;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #666;
			width: 180rpx;
		}

		.icon {
			font-size: 28rpx;
			color: #666;
		}

		.val {
			font-size: 28rpx;
			text-align: right;

			.copy {
				color: #007A69;
				border: #007A69 1rpx solid;
				margin-left: 5rpx;
				width: 70rpx;
				height: 32rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
				display: inline-block;
				text-align: center;
				line-height: 32rpx;
				margin-left: 10rpx;
			}
		}
	}

	.voucherCode_colse {
		padding: 0 24rpx;

		.title {
			height: 80rpx;
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 30rpx;
			line-height: 80rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		.title_info {
			line-height: 80rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
		}

		.codeList {
			margin-bottom: 20rpx;
			padding: 10rpx 24rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.item {
				//游客信息
				height: 90rpx;
				line-height: 80rpx;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				text {
					&:first-child {
						display: inline-block;
						width: 110rpx;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						line-height: 32rpx;
					}

					&:last-child {
						font-size: 30rpx;
						color: #666666;
						line-height: 24rpx;
					}
				}
			}
		}
	}

	.listItemed {
		padding: 13rpx 0;
		font-size: 26rpx;
		color: #666;
		align-items: center;

		.name {
			font-size: 28rpx;
			color: #111111;
			font-weight: bold;
		}



		.top {
			margin-bottom: 30rpx;
		}



	}

	.voucherCode {
		margin: 20rpx 24rpx;
		padding: 0 24rpx 36rpx;
		border-radius: 16rpx;
		background-color: #fff;
		z-index: 2;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			padding: 40rpx 0 30rpx;
			color: #333;
		}

		.codeList {
			.touristList {
				width: 100%;
				margin-left: -10rpx;
				display: inline-grid;
				grid-template-columns: repeat(4, minmax(23%, 1fr));
				grid-gap: 10rpx;
				justify-items: center;
				align-items: center;

				.tourist {
					width: max-content;

					padding: 13rpx 43rpx;
					border-radius: 10rpx;
					border: 1rpx solid #e5e5e5;
				}

				.tourist_selected {
					color: #fff;
					background: #007A69;
				}
			}

			.listItem {
				padding: 30rpx 0;

				.top {
					text-align: center;
				}
			}
		}


	}

	.orange {
		color: #aaa;
		margin-left: 30rpx;
		font-size: 26rpx;
		font-weight: initial;
	}

	.ticketInfo {
		margin: 0px 23rpx;
		padding: 40rpx 24rpx 20rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;

		.name {
			font-weight: 600;
			font-size: 36rpx;
			color: #333;


		}

		.list-image {
			display: flex;
			gap: 0 30rpx;

			.image {
				margin: 34rpx 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: relative;

				image {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				position: absolute;
				bottom: -14rpx;
				text-align: center;
				left: 13rpx;
				width: 76rpx;
				height: 28rpx;
				line-height: 28rpx;
				border-radius: 50rpx;
				background-color: #007A69;
				color: #fff;
			}
		}

		.number {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #777;
			margin: 24rpx 0;

			view {
				&:last-child {
					text {
						&:last-child {
							color: #FF4141
						}
					}
				}
			}
		}

		.date {
			margin-top: 24rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}

				&:nth-child(3) {
					color: #FF7D01;
					margin-left: 15rpx;
				}
			}
		}

		.position {
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #808080;
			display: flex;
			align-items: center;

		}

		.type {
			padding: 20rpx 0 20rpx;
			font-size: 26rpx;
			color: #808080;

		}

		.prices {

			.txt,
			.num {
				color: #666;
				font-size: 26rpx;
			}

			.txt {
				margin-left: -30rpx;
			}

			.num {
				margin-right: -30rpx;
			}
		}


	}

	.head.data-v-4aeef636 {
		background: #0EBFFE;
	}

	.head-one {
		padding: 0 24rpx 24rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: Regular;
		color: #FFFFFF;
	}

	.head {
		padding: 34rpx 24rpx;
		display: flex;
		position: relative;
		z-index: 2;

		text {
			color: #fff;

			&:nth-child(1),
			&:nth-child(3) {
				font-size: 44rpx;
				font-weight: bold;

				text {
					font-size: 28rpx;
					margin-left: 8rpx;
				}
			}

			&:nth-child(2) {
				flex: 1;
				text-align: right;
				width: 100px;
				font-size: 36rpx;
			}
		}
	}

	.djs {
		width: calc(100% - 88rpx);
		padding: 0 20rpx;
		margin-bottom: 35rpx;
		position: relative;
	}

	.btns {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 32rpx 32rpx 50rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);


		&>view {
			width: calc(50% - 15rpx);
			height: 80rpx;
			border-radius: 46rpx;
			// border: 1rpx solid #999999;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #111111;
			flex: 1;
			background-color: #F6F6F6;
		}

		.share {
			width: 100%;
			height: 80rpx;
			border-radius: 46rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #fff;
			border-color: #007A69;
			background-color: #007A69;
		}
	}





	/deep/.u-popup__content.data-v-3a231fda {
		border-radius: 24rpx;
	}

	.rect {
		margin-top: 14rpx;
		width: 202rpx;
	}

	/deep/.u-button--large.data-v-2bf0e569 {
		margin: 0 20rpx;
		width: 41%;
		height: 43px;
	}

	.details {
		padding: 40rpx 30rpx 200rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		&.details_pay {
			background: #F6F6F6;

			.wechat_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 83rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 41rpx 24rpx;

				.wp_left {
					display: flex;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 24rpx;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pay_submit {
				margin-top: 59rpx;
				height: 92rpx;
				background: #007A69;
				border-radius: 46rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>